      <template>
        <div>
            <el-dialog :title="title" :width="width" :visible.sync="backupVisible" :close-on-click-modal="false" @close="closeDialog">
                <el-form :inline="true">
                    <div style="margin-bottom:20px">
                        <el-input v-model="sensorName" placeholder="请输入设备名称/设备ID" size="small" class="search_inp"></el-input>
                        <el-button type="primary"  size="small">搜索</el-button>

                        <el-button-group class="btns-group">
                            <el-button @click="filterDevice(1)" :class="{'cur': filterDeviceType == 1}">全部</el-button>
                            <el-button @click="filterDevice(2)" :class="{'cur': filterDeviceType == 2}">已选择</el-button>
                        </el-button-group>

                    </div>
                </el-form>
                <el-table  ref="multipleTable" :data="tableData"  @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                    <el-table-column label="设备ID" prop="id"/>
                    <el-table-column prop="name" label="设备名称"/>
                    <el-table-column label="设备类型" prop="manufactor" />
                    <el-table-column label="所属商户" prop="mode" />
                    <el-table-column label="所属分组" prop="mode" />
                    <el-table-column label="在线状态" prop="date" />
                </el-table>
                <!--分页-->
                <div class="Pagination">
                    <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-size="20"
                    layout="total, prev, pager, next"
                    :total="count">
                    </el-pagination>
                </div>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="closeDialog()">取 消</el-button>
                    <el-button type="primary" @click="nextStep()">下一步</el-button>
                </div>
            </el-dialog> 

            <bage-finish width="600px" v-if="bMacFinishDialog.show" :isShow="bMacFinishDialog.show"  @closeDialog="hideBmacFinishDialog" title="批量配置MAC老化时间"></bage-finish>
        </div>
      </template>
      <script>
      import BageFinish from '@/components/netbox/bAgeFinish'
      export default {
          data() {
              return {
                  currentPage: 1,
                  count: 10, //总记录数
                  filterDeviceType: 1,
                  backupVisible: this.isShow,
                  bMacFinishDialog: {show: false},
                  sensorName: '',
                  multipleSelection: [],
                  tableData: []
              }
          },
          props: ['isShow', 'title', 'width'],
          components: {BageFinish},
          methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`)
            },
            handleCurrentChange(val) {
                this.currentPage = val
            },
            //设置弹窗可见
            closeDialog() {
                this.$emit('closeDialog')
            },
            hideBmacFinishDialog() {
                 this.bMacFinishDialog.show = false
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            nextStep() {
                this.bMacFinishDialog.show = true
            },
            filterDevice(type) {
                this.filterDeviceType = type
            }
          }
      }
      </script>
      
<style lang="less" scoped>
    .search_inp {
        display: inline-block;
        width: 220px;
        .el-input__inner {
            height: 36px!important;
            line-height: 36px!important;
        }
    }
    .btns-group {
        margin-left: 250px;
    }
    .btns-group .cur {
        border: 1px solid #409EFF;
        color: #409EFF;
    }
</style>
